import React, { useState } from 'react';
import { FilterSidebar } from '../components/UI/FilterSidebar';
import { Pagination } from '../components/UI/Pagination';
import { CalendarIcon, ClockIcon, ChevronRightIcon, SearchIcon } from 'lucide-react';
import { Link } from 'react-router-dom';
export const ArticlesPage = () => {
  // Filter state
  const [selectedFilters, setSelectedFilters] = useState<Record<string, string[]>>({
    category: [],
    stage: [],
    date: []
  });
  // Search state
  const [searchQuery, setSearchQuery] = useState('');
  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  // Filter groups
  const filters = [{
    id: 'category',
    name: 'Category',
    options: [{
      id: 'sleep',
      label: 'Sleep'
    }, {
      id: 'feeding',
      label: 'Feeding'
    }, {
      id: 'safety',
      label: 'Safety'
    }, {
      id: 'development',
      label: 'Development'
    }, {
      id: 'health',
      label: 'Health & Wellness'
    }, {
      id: 'gear',
      label: 'Baby Gear'
    }]
  }, {
    id: 'stage',
    name: 'Life Stage',
    options: [{
      id: 'pregnancy',
      label: 'Pregnancy'
    }, {
      id: 'newborn',
      label: 'Newborn (0-3M)'
    }, {
      id: 'baby',
      label: 'Baby (4-12M)'
    }, {
      id: 'toddler',
      label: 'Toddler (1-3Y)'
    }]
  }, {
    id: 'date',
    name: 'Published Date',
    options: [{
      id: 'last-week',
      label: 'Last Week'
    }, {
      id: 'last-month',
      label: 'Last Month'
    }, {
      id: 'last-3-months',
      label: 'Last 3 Months'
    }, {
      id: 'last-year',
      label: 'Last Year'
    }]
  }];
  // Sample articles data
  const articles = [{
    id: 'a1',
    title: 'How to Choose the Perfect Crib Mattress for Your Baby',
    excerpt: "Learn what materials are safest and how firmness affects your baby's sleep quality and development.",
    image: 'https://images.unsplash.com/photo-1556010334-d6ed191db491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'June 12, 2023',
    readTime: '7 min read',
    category: 'sleep',
    stage: 'newborn',
    author: 'Dr. Emily Chen'
  }, {
    id: 'a2',
    title: 'The Ultimate Guide to Baby-Proofing Your Home',
    excerpt: "From cabinet locks to outlet covers, here's everything you need to create a safe environment for your curious crawler.",
    image: 'https://images.unsplash.com/photo-1556784344-ad913a86b2c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'June 5, 2023',
    readTime: '9 min read',
    category: 'safety',
    stage: 'baby',
    author: 'Sarah Johnson'
  }, {
    id: 'a3',
    title: 'Best High Chairs of 2023: Tested by Real Parents',
    excerpt: 'We put the top-rated high chairs through rigorous testing with real families to find the best options for every budget.',
    image: 'https://images.unsplash.com/photo-1596461010467-ac432e9058c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'May 28, 2023',
    readTime: '8 min read',
    category: 'feeding',
    stage: 'baby',
    author: 'Michael Rodriguez'
  }, {
    id: 'a4',
    title: 'Understanding Baby Sleep Cycles: A Science-Based Approach',
    excerpt: 'Discover how baby sleep patterns differ from adults and how you can use this knowledge to help your little one get better rest.',
    image: 'https://images.unsplash.com/photo-1590083948608-525d75ee5eee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'May 21, 2023',
    readTime: '6 min read',
    category: 'sleep',
    stage: 'newborn',
    author: 'Dr. James Peterson'
  }, {
    id: 'a5',
    title: 'Introducing Solid Foods: When, What, and How',
    excerpt: 'A comprehensive guide to starting your baby on solid foods with age-appropriate recommendations and recipes.',
    image: 'https://images.unsplash.com/photo-1590992884077-564d7cefd4a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'May 15, 2023',
    readTime: '10 min read',
    category: 'feeding',
    stage: 'baby',
    author: 'Emma Williams, RD'
  }, {
    id: 'a6',
    title: 'Essential Pregnancy Checklist for Each Trimester',
    excerpt: 'Stay organized throughout your pregnancy with our comprehensive checklist of what to do, buy, and prepare in each trimester.',
    image: 'https://images.unsplash.com/photo-1595924738946-7169f41c363c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'May 8, 2023',
    readTime: '12 min read',
    category: 'health',
    stage: 'pregnancy',
    author: 'Jennifer Lee, CNM'
  }, {
    id: 'a7',
    title: 'Developmental Milestones: What to Expect in the First Year',
    excerpt: 'Learn about the key physical, cognitive, and social milestones your baby should reach during their first 12 months.',
    image: 'https://images.unsplash.com/photo-1566004100631-35d015d6a491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'May 1, 2023',
    readTime: '8 min read',
    category: 'development',
    stage: 'baby',
    author: 'Dr. Robert Kim'
  }, {
    id: 'a8',
    title: 'Creating a Montessori-Inspired Nursery',
    excerpt: 'Design a nursery that fosters independence and learning with these Montessori principles and product recommendations.',
    image: 'https://images.unsplash.com/photo-1586015555751-63bb77f4322a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'April 24, 2023',
    readTime: '7 min read',
    category: 'gear',
    stage: 'newborn',
    author: 'Olivia Martinez'
  }, {
    id: 'a9',
    title: 'Toddler Tantrums: Understanding and Managing Strong Emotions',
    excerpt: 'Learn effective strategies to help your toddler navigate big feelings and reduce the frequency and intensity of tantrums.',
    image: 'https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'April 17, 2023',
    readTime: '9 min read',
    category: 'development',
    stage: 'toddler',
    author: 'Dr. Amanda Thompson'
  }, {
    id: 'a10',
    title: 'Baby-Wearing 101: Benefits and Best Carriers',
    excerpt: 'Discover the benefits of baby-wearing for both parent and child, plus our top picks for carriers, wraps, and slings.',
    image: 'https://images.unsplash.com/photo-1581952976147-5a2d15560349?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'April 10, 2023',
    readTime: '6 min read',
    category: 'gear',
    stage: 'newborn',
    author: 'Thomas Wilson'
  }, {
    id: 'a11',
    title: 'Common Breastfeeding Challenges and Solutions',
    excerpt: 'Practical advice for overcoming common breastfeeding obstacles from lactation consultants and experienced moms.',
    image: 'https://images.unsplash.com/photo-1584814369280-712ede580bee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'April 3, 2023',
    readTime: '11 min read',
    category: 'feeding',
    stage: 'newborn',
    author: 'Lisa Brown, IBCLC'
  }, {
    id: 'a12',
    title: 'Preparing Your Toddler for a New Sibling',
    excerpt: 'Help your toddler adjust to the arrival of a new baby with these expert tips for a smooth family transition.',
    image: 'https://images.unsplash.com/photo-1557939574-a2cb399f443f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    date: 'March 27, 2023',
    readTime: '8 min read',
    category: 'development',
    stage: 'toddler',
    author: 'Dr. Patricia Garcia'
  }];
  // Handle filter changes
  const handleFilterChange = (groupId: string, optionId: string, isSelected: boolean) => {
    setSelectedFilters(prevFilters => {
      const updatedGroup = [...(prevFilters[groupId] || [])];
      if (isSelected) {
        updatedGroup.push(optionId);
      } else {
        const index = updatedGroup.indexOf(optionId);
        if (index > -1) {
          updatedGroup.splice(index, 1);
        }
      }
      return {
        ...prevFilters,
        [groupId]: updatedGroup
      };
    });
    // Reset to first page when filters change
    setCurrentPage(1);
  };
  // Clear all filters
  const clearFilters = () => {
    setSelectedFilters({
      category: [],
      stage: [],
      date: []
    });
    setSearchQuery('');
    setCurrentPage(1);
  };
  // Filter articles based on selected filters and search query
  const filteredArticles = articles.filter(article => {
    // Filter by search query
    if (searchQuery && !article.title.toLowerCase().includes(searchQuery.toLowerCase()) && !article.excerpt.toLowerCase().includes(searchQuery.toLowerCase())) {
      return false;
    }
    // Filter by category
    if (selectedFilters.category.length > 0 && !selectedFilters.category.includes(article.category)) {
      return false;
    }
    // Filter by stage
    if (selectedFilters.stage.length > 0 && !selectedFilters.stage.includes(article.stage)) {
      return false;
    }
    // Filter by date (simplified for demo)
    if (selectedFilters.date.length > 0) {
      // This is a simplified example - in a real app you would compare actual dates
      if (selectedFilters.date.includes('last-week') && article.id > 'a3') return false;
      if (selectedFilters.date.includes('last-month') && article.id > 'a8') return false;
      if (selectedFilters.date.includes('last-3-months') && article.id > 'a11') return false;
    }
    return true;
  });
  // Pagination logic
  const itemsPerPage = 6;
  const totalPages = Math.ceil(filteredArticles.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const displayedArticles = filteredArticles.slice(startIndex, startIndex + itemsPerPage);
  // Handle search form submit
  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setCurrentPage(1); // Reset to first page on new search
  };
  return <div className="w-full bg-cream">
      {/* Hero Section */}
      <div className="bg-white py-12 md:py-16 border-b border-gray-100">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
              Articles & Guides
            </h1>
            <p className="font-inter text-gray-600 text-lg mb-8">
              Expert advice, in-depth guides, and evidence-based information for
              every stage of your parenting journey.
            </p>
            <form onSubmit={handleSearchSubmit} className="flex max-w-lg mx-auto">
              <input type="text" placeholder="Search articles..." className="flex-grow px-4 py-3 rounded-l-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-terracotta/30" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
              <button type="submit" className="px-4 py-3 bg-terracotta text-white rounded-r-md hover:bg-terracotta/90 transition-colors">
                <SearchIcon size={20} />
              </button>
            </form>
          </div>
        </div>
      </div>
      {/* Main Content */}
      <div className="container mx-auto px-4 md:px-6 py-12">
        <div className="flex flex-col md:flex-row gap-8">
          {/* Sidebar Filters */}
          <FilterSidebar filters={filters} selectedFilters={selectedFilters} onFilterChange={handleFilterChange} onClearFilters={clearFilters} />
          {/* Articles Grid */}
          <div className="flex-1">
            <div className="flex justify-between items-center mb-8">
              <h2 className="font-nunito font-semibold text-2xl text-dark">
                {filteredArticles.length}{' '}
                {filteredArticles.length === 1 ? 'Article' : 'Articles'}
              </h2>
              <div className="flex items-center">
                <span className="text-sm text-gray-500 mr-3">Sort by:</span>
                <select className="border border-gray-300 rounded-md text-sm p-1.5">
                  <option>Most Recent</option>
                  <option>Most Popular</option>
                  <option>Alphabetical</option>
                </select>
              </div>
            </div>
            {filteredArticles.length > 0 ? <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {displayedArticles.map(article => <Link key={article.id} to={`/articles/${article.id}`} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow flex flex-col h-full">
                    <div className="aspect-[16/9] w-full">
                      <img src={article.image} alt={article.title} className="w-full h-full object-cover" />
                    </div>
                    <div className="p-5 flex flex-col flex-grow">
                      <div className="flex items-center mb-3">
                        <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium 
                          ${article.category === 'sleep' ? 'bg-green/20 text-green' : article.category === 'feeding' ? 'bg-yellow/20 text-yellow-800' : article.category === 'safety' ? 'bg-red-100 text-red-800' : article.category === 'development' ? 'bg-blue-100 text-blue-800' : article.category === 'health' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800'}`}>
                          {article.category.charAt(0).toUpperCase() + article.category.slice(1)}
                        </span>
                      </div>
                      <h3 className="font-nunito font-semibold text-lg mb-2 line-clamp-2">
                        {article.title}
                      </h3>
                      <p className="text-gray-600 text-sm mb-4 line-clamp-3 flex-grow">
                        {article.excerpt}
                      </p>
                      <div className="flex items-center justify-between text-xs text-gray-500 mt-auto">
                        <span className="flex items-center">
                          <CalendarIcon size={14} className="mr-1" />
                          {article.date}
                        </span>
                        <span className="flex items-center">
                          <ClockIcon size={14} className="mr-1" />
                          {article.readTime}
                        </span>
                      </div>
                    </div>
                  </Link>)}
              </div> : <div className="bg-white rounded-lg p-8 text-center border border-gray-200">
                <h3 className="font-medium text-lg mb-2">No articles found</h3>
                <p className="text-gray-600 mb-4">
                  Try adjusting your filters or search terms to find what you're
                  looking for.
                </p>
                <button onClick={clearFilters} className="text-terracotta hover:text-terracotta/80 font-medium">
                  Clear all filters
                </button>
              </div>}
            {/* Pagination */}
            {filteredArticles.length > 0 && <div className="mt-8">
                <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
              </div>}
          </div>
        </div>
      </div>
      {/* Featured Topics */}
      <div className="bg-white py-12 border-t border-gray-100">
        <div className="container mx-auto px-4 md:px-6">
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8 text-center">
            Popular Topics
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link to="/articles?category=sleep" className="bg-cream hover:bg-cream/70 transition-colors rounded-lg p-6 text-center">
              <h3 className="font-nunito font-semibold text-lg mb-2">Sleep</h3>
              <p className="text-sm text-gray-600">
                Tips for better baby sleep patterns
              </p>
            </Link>
            <Link to="/articles?category=feeding" className="bg-cream hover:bg-cream/70 transition-colors rounded-lg p-6 text-center">
              <h3 className="font-nunito font-semibold text-lg mb-2">
                Feeding
              </h3>
              <p className="text-sm text-gray-600">
                Breastfeeding, formula, and solid foods
              </p>
            </Link>
            <Link to="/articles?category=development" className="bg-cream hover:bg-cream/70 transition-colors rounded-lg p-6 text-center">
              <h3 className="font-nunito font-semibold text-lg mb-2">
                Development
              </h3>
              <p className="text-sm text-gray-600">
                Milestones and growth tracking
              </p>
            </Link>
            <Link to="/articles?category=gear" className="bg-cream hover:bg-cream/70 transition-colors rounded-lg p-6 text-center">
              <h3 className="font-nunito font-semibold text-lg mb-2">
                Baby Gear
              </h3>
              <p className="text-sm text-gray-600">
                Product reviews and recommendations
              </p>
            </Link>
          </div>
        </div>
      </div>
      {/* Newsletter */}
      <div className="container mx-auto px-4 md:px-6 py-12">
        <div className="bg-terracotta/10 rounded-lg p-8 border border-terracotta/20">
          <div className="flex flex-col md:flex-row items-center justify-between">
            <div className="mb-6 md:mb-0 md:mr-6 md:max-w-lg">
              <h3 className="font-nunito font-semibold text-xl mb-2 text-center md:text-left">
                Stay Updated with the Latest Articles
              </h3>
              <p className="text-gray-600 text-center md:text-left">
                Subscribe to our newsletter to receive new articles, guides, and
                exclusive content directly in your inbox.
              </p>
            </div>
            <div className="w-full md:w-auto">
              <form className="flex flex-col sm:flex-row gap-3">
                <input type="email" placeholder="Your email address" className="px-4 py-2.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-terracotta/50 w-full" required />
                <button type="submit" className="px-5 py-2.5 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors font-medium whitespace-nowrap">
                  Subscribe
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>;
};